<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="main">10-20</button>
    <button class="main1">20-30</button>
    <button class="main2">40-50</button>
    <div class="pay">

    </div>
</body>
</html>
<script>
    function $(fas){return document.querySelector(fas)}
    let arr=[10,25,32,44,55,66,77,84,95,71,82,95,42,50,6,1,2,3,1,11,2,22,44,33,5556,121,88,66,77,11,11,]
    let sum=Array.from(new Set(arr))
    console.log(sum);
    document.querySelector('.pay').innerHTML=sum.join(' ')
    let lop=[]
    $('.main').onclick=function(){
        arr.forEach((res)=>{
            if(res>10 && res<20){
                lop.push(res)
                lop.sort(function(a,b){
                    return a-b
                })

                   let sumo= new Set(lop)
                
                  let pull= JSON.stringify(sumo)
                  console.log(pull);
                  let just=pull.split(' ')
                      
                    
                document.querySelector('.pay').innerHTML=sumo
            }
        })
    }
</script>